import React from 'react';
import { observer, inject } from 'mobx-react';
import css from './index.less';
import PageContentRender from 'components/pageContentRender';
import PropTypes from 'prop-types';

@observer
export default class Page extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  /**
   * 页面背景（独立出来，方便后续扩展，如：视频背景层）
   */
  renderPageBg() {
    const { mod } = this.props;
    const props = {
      className: css.pageBg,
      style: mod.style,
    };
    return (
      <div {...props} />
    );
  }

  renderContent() {
    const { mod } = this.props;
    return (
      <PageContentRender mod={mod} />
    );
  }

  render() {
    const { mod } = this.props;
    if (!mod) {
      return (
        <div>
          页面渲染失败
        </div>
      );
    }

    const props = {
      className: css.page,
      style: {
        backgroundColor: mod.backgroundColor,
      },
      onMouseDown: (e) => {
        e.stopPropagation();
        mod.selectSelf();
      }
    };

    return (
      <div {...props}>
        {this.renderPageBg()}
        {this.renderContent()}
      </div>
    );
  }
}
